<template>
  <div class="lists-container">
    <div class="order-wrapper" v-show="listsData.length>0">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
        <div class="order-box" v-for="(listsItem,index) in listsData" :key="index">
          <section class="order-list-info clearfix">
            <a @click="jumpTo(listsItem.link)">
              <div class="fl">
                <!-- <p>
                  订单：{{listsItem.order_prize_no}}
                </p>
                <p>日期：{{listsItem.create_time}}</p> -->
                <div class="order-origin">
                  <span class="name">订单来源：</span>
                  <span class="origin">{{listsItem.game_name}}</span>
                </div>
              </div>
              <div class="status fr">{{listsItem.status_name}}</div>
            </a>
          </section>
          <section class="order-goods">
            <ul>
              <li class="goods-li">
                <section class="order-goods-img">
                  <a @click="jumpTo(listsItem.link)">
                    <img
                      :src="listsItem.img_path+'80x80'"
                      width="80"
                      height="80"
                      v-if="listsItem.is_compress"
                    />
                    <img :src="listsItem.img_path" width="80" height="80" v-else />
                  </a>
                </section>
                <section class="order-goods-infor g-flex">
                  <div class="left">
                    <a class="goods-title" @click="jumpTo(listsItem.link)">{{listsItem.item_title}}</a>
                    <p class="goods-props" v-if="listsItem.level">{{listsItem.level}}</p>
                    <p class="price fl" v-if="listsItem.pay_type && listsItem.pay_type==5">&dollar; <em>{{listsItem.current_price}}</em>}</p>
                    <span class="price" v-else v-html="scaleGoodsPriceFn(listsItem.current_price)"></span>
                  </div>
                  <!-- <div class="right">
                    <span class="num fr"><i>x</i>{{goods.num}}</span>
                  </div> -->
                </section>
              </li>
            </ul>
          </section>
          <section class="order-no-wrap">
            <p>订单号：{{listsItem.order_prize_no}}</p>
            <p>时间：{{listsItem.create_time}}</p>
          </section>

          <section class="order-pay">
            <div class="good-more-btn">
              <van-button class="btn orange-btn" round hairline @click="JumpName('prize-detail',{id:listsItem.order_prize_id})">详情</van-button>
              <!-- <a href="javascript:;" class="orange-btn" @click="Jump('prize-detail',{id:listsItem.order_prize_id})">详情</a> -->
              <van-button
                href="javascript:;"
                class="btn orange-btn"
                round hairline
                v-if="listsItem.status==2"
                @click="confirmOrder(listsItem.order_prize_id)"
              >确认收货</van-button>
            </div>
          </section>
        </div>
      </van-list>
    </div>
    <div v-show="!listsData.length">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant'
import noData from '@/components/noData/index'
import { getPrizeList, userConfirm } from '@/api/order/prizeOrder.js'
import { scaleGoodsPrice } from '@/utils/index.js'
import { openPage } from '@/utils/utils.js'
export default Vue.extend({
  name: 'index',
  components: {
    noData
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无订单',
        marginTop: '60px',
        width: '214px',
        txtMarginTop: '-46px'
      },
      loading: false,
      error: false,
      finished: false,
      listParams: {
        p: 1,
        status: '', // 不传所有订单，1待发货，2待收货，3已收货
        game_order_no: '', // 搜索关键词
        game_type: '', // 游戏类型1普通游戏，2萝卜精灵
        type: '' // 游戏类型，比如普通游戏中的幸运大转盘：1
      },
      listsData: []
    }
  },
  methods: {
    // TODO小程序跳转
    jumpTo(link) {
      openPage(link)
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    // 跳转
    linkTo(url) {
      window.location.href = url
    },
    init() {
      // 置空数据
      this.listsData = []
      this.listParams.p = 1
      this.finished = false
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getPrizeList(this.listParams).then(res => {
        this.$loadingWrap.close()
        this.loading = false
        if (res.status == 1) {
          const resData = res.data
          // 所有游戏名称列表
          this.$emit('getAllGame', resData.all_game)

          this.listsData = resData.lists
          this.listParams.p++
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 加载更多
    onLoad() {
      if (this.finished) return false
      getPrizeList(this.listParams)
        .then(res => {
          this.loading = false
          if (res.status == 1 && res.data.lists.length > 0) {
            this.listsData.push(...res.data.lists)
            this.listParams.p++
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    },
    // 确认收货
    confirmOrder(id) {
      const params = {
        id: id
      }
      Dialog.confirm({
        message: '确认收货？',
        className: 'common-confirm',
        closeOnClickOverlay: true
      })
        .then(() => {
          this.$loadingWrap.show()
          setTimeout(() => {
            this.$loadingWrap.close()
          }, 10000)
          userConfirm(params).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.$Error('操作成功')
              this.init()
            } else {
              this.$Error(res.msg)
            }
          })
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  created() {
    this.init()
    var that = this
    this.$Bus.$on('statusEvent', function(option) {
      that.listParams.game_order_no = option.keyword
      that.listParams.status = option.status
      that.init()
    })

    that.$Bus.$on('prizeListSearch', function(option) {
      that.listParams.game_order_no = option.keyword
      that.init()
    })

    that.$Bus.$on('gameTypeSelect', function(option) {
      that.listParams.game_order_no = option.keyword
      that.listParams.game_type = option.game_type
      that.listParams.type = option.type
      that.init()
    })
  },
  beforeDestroy() {
    this.$Bus.$off('statusEvent')
    this.$Bus.$off('prizeListSearch')
    this.$Bus.$off('gameTypeSelect')
  }
})
</script>

<style lang="scss">
@import 'src/styles/order/lists';
// .lists-container {
//   .order-pay {
//     .good-more-btn {
//       padding: 20px 0;
//     }
//   }
//   .order-box {
//     .order-list-info {
//       a {
//         .status {
//           line-height: 1.5;
//           width: 20%;
//         }
//       }
//     }
//   }
// }
</style>